<template>
	<view
		class='sxs-dropdown-custom'
		style="background-color: #FFFFFF; height: 520rpx;border-top: 1rpx solid #C4C4C4;overflow: hidden;"
	>
		<scroll-view scroll-y="true" style="border-right: 2rpx solid #C4C4C4; width: 400rpx;">
			<view
				v-for="(item,index) in district" :key="index"
				class='custom-item'
				@click.stop='province(item)'
			>
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true">
			<view
				class='custom-item'
				v-for="(item,index) in city" :key="index"
				@click='clickCity(item,index)'
			>
				{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getCity } from '@/api/car.js'
export default{
	data () {
		return {
			//城市列表：省
			district: [{
				id: 0,
				name: '全部'
			}],
			//城市列表：市
			city: [{
				id: 0,
				name: '全部'
			}],
		}
	},
	async created(){
		if( localStorage.getItem('city') ){
			this.district = JSON.parse( localStorage.getItem('city')  );
			return;
		}
		let res = await getCity();
		this.district = res.data.list;
		localStorage.setItem('city', JSON.stringify(res.data.list) );
	},
	methods:{
		//省
		province( item  ){
			//根据接口key，修改this.city数据
			let cityList = this.district.filter(v=>v.id==item.id );
			this.city = cityList[0].list;
		},
		//市
		clickCity( item, index ){
			this.$emit('success',{
				item,
				index
			});
		}
	}
}
</script>

<style lang='scss'>
.sxs-dropdown-custom{
	display: flex;
	
}
.custom-item{
	display: flex;
	align-items: center;
	justify-content: center;
	padding:15rpx;
}
</style>